import React, { Component } from 'react';
import '../style/Detail.scss'
import { NavBar, Swiper, Toast, Tag } from 'antd-mobile'
import { MoreOutline } from 'antd-mobile-icons'
import service from '../api';
import GoodNav from '../components/GoodNav/GoodNav';


class Detail extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            recommList: [],
            swiperList: [],
            dataList: []
        }
    }
    async componentDidMount() {
        // 商品推荐请求
        var res = await service.pro.recommendlist({})
        
        var data = await service.pro.detailList(this.props.location.state.id)
        console.log(data);

        this.setState({
            recommList: res.data.data,
            dataList: data.data.data,
            swiperList: data.data.data.banners[0].split(',')
        }, () => {
            // console.log(this.state.dataList);
        })
    }


    render() {
        return (
            <div className='detail'>


                <div className="top">
                    <NavBar onBack={() => this.props.history.go(-1)} right={<MoreOutline style={{ fontSize: 35 }} />}>详情页</NavBar>
                </div>

                <div className="swiper">
                    <Swiper autoplay loop>

                        {
                            this.state.swiperList.map((item: any, index: any) => {
                                return (
                                    <Swiper.Item key={index}>
                                        <img src={item} alt="" />
                                    </Swiper.Item>
                                )
                            })
                        }
                    </Swiper>

                    <div className="box">
                        <div className="one">
                            <div className="price">¥ {this.state.dataList.originprice}</div>
                            <span>销量:{this.state.dataList.sales}</span>
                        </div>

                        <div className="name">
                            <Tag className='tag' color='danger'>{this.state.dataList.brand}</Tag>
                            <Tag className='tag' color='primary'>{this.state.dataList.category}</Tag>
                            {this.state.dataList.proname}
                        </div>
                    </div >
                </div>



                <h2>猜你喜欢</h2>
                <div className="recomm">
                    {
                        this.state.recommList.map((item: any, index: any) => {
                            return (
                                // 首页商品列表
                                <div className="box" key={index}>
                                    <img src={item.img1} alt="" />
                                    <div className="name">{item.proname}</div>
                                    <div className="price">¥{item.originprice}</div>
                                </div>
                            )
                        })
                    }
                </div>

                {/* 底部导航 */}
                <GoodNav goodid={this.props.location.state.id} />
            </div >
        );
    }
}

export default Detail;